<template>
	<view class="add">
		<view class="item">
			<view class="title">通知内容</view>
			<textarea name="" id="" cols="30" rows="16" class="public textarea" v-model="content" placeholder="请输入通知内容"></textarea>
		</view>
		<view class="totalBtn2" @click="submit">更新通知</view>
		<view class="n_list">
			<view class="n_tit">通知列表</view>
			<view class="n_item flex_between" v-for="(item,index) in list" :key="item.id">
				<view class="flex1">
					<view class="content">
						<rich-text class="rich_text" :nodes="item.content"></rich-text>
					</view>
					<text class="time">{{item.addtime}}</text>
				</view>
				<view class="delete" @click="deleteNotice(item.id,index)"><image src="/static/delete.png" mode="widthFix" role="img"></image></view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<text v-if="isempty">没有更多了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				list: [{
					id:1,
					content: '1这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '2这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '3这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '4这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '5这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				},
				{
					id:1,
					content: '这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容，这是一个通知内容',
					addtime: '2025-03-03 18:50:00'
				}],
				page: 0,
				isloading: false,
				isempty: false
			};
		},
		onLoad(){
			this.getList();
		},
		 methods: {
			submit(){
				 if(this.content==''){
					return this.$api.msg('请填写内容');
				 }
				 this.$axios('', 'POST', '',{
					 content: this.content,
				 }).then(res => {
				 	if (res.data.code == 200) {
						this.$api.msg(res.data.data);
						this.page = 0;
						this.list = [];
						this.getList();
				 	}
				 })
			},
			getList(){
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('', 'POST', '', {
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			deleteNotice(id,index){
				uni.showModal({
					//提示
					title: '删除确认',
					content: '是否要删除已发布的通知？',
					showCancel:true,
					cancelText:'取消',
					confirmText:'确认',
					success:res=> {
						if(res.confirm){
							this.$axios('', 'POST', '', {
								id: id
							}).then(res=>{
								if(res.data.code == 200){
									this.list.splice(index,1);
									this.$api.msg(res.data.data);
								}
							})
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
	}
	.add{
		padding: 20rpx;
		font-size: 32rpx;
		.item{
			.title{
				margin-bottom: 20rpx;
				&::before{
					content: "";
					display: inline-block;
					width: 8rpx;
					height: 26rpx;
					border-radius: 20rpx;
					margin-right: 12rpx;
					background-color: $bg-color;
				}
			}
			textarea{
				width: 100%;
				background: #fff;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
				height: 340rpx;
			}
		}
	}
	.n_list{
		padding: 0 0 40rpx;
		.n_tit{
			text-align: center;
			color: #8585cc;
			margin-bottom: 30rpx;
		}
		.n_item{
			margin-bottom: 20rpx;
			align-items: flex-start;
			border-bottom: 2rpx solid #eee;
			padding-bottom: 10rpx;
			.flex1{
				padding-right: 30rpx;
				.content{
					line-height: 42rpx;
					font-size: 26rpx;
				}
				.time{
					font-size: 24rpx;
					color: #999;
				}
			}
			.delete{
				width: 32rpx;
				padding-top: 6rpx;
				image{
					width: 100%;
				}
			}
		}
	}
</style>
